<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React App</title>
  <style>
      .container {
          width: 300px;
          height: 300px;
          background-color: #bfa;
      }
  </style>
</head>
<body>
<div id="root">

</div>
</body>
<script src="js/old/babel.min.js"></script>
<script src="js/old/react.development.js"></script>
<script src="js/old/react-dom.development.js"></script>
<script type="text/babel">
  const users = [
    {id: '7291', name: 'alice', age: 30},
    {id: '3881', name: 'jack', age: 32},
    {id: '8142', name: 'kite', age: 18}
  ]

  // jsx 语法规则
  // 1. jsx不是字符串, 不能使用单引号
  // 2. {} 嵌入表达式
  // 3. className css 语法
  // 4. 事件处理语法
  const vdom = (
    <div className="container">
      <h2 style={{color: 'blue', fontSize: '20px'}}>
        列表显示
        <ul>
          {users.map((user) => (
            <li key={user.id}>
              {user.name} - {user.age}
              <button onClick={() => alert(JSON.stringify(user))}>
                click show me({user.name})!
              </button>
            </li>
          ))}
        </ul>
      </h2>
    </div>
  )

  ReactDOM.render(vdom, document.getElementById('root'))
</script>
</html>